<style scoped>
.editor{text-align: justify;}

._info_ {padding: 8px;}
._info_ .info{font-size: 0.8em;color: var(--color-bg-re-r);}
</style>
<template>
  <div class="info-outer">
    <HeaderSlot>
      <van-nav-bar :title="$t(this_action.label)" left-arrow @click-left="href_handle(-1)" />
    </HeaderSlot>
    <form_param :config="form_config">
      <template #_info_="row">
        <div class="_info_">
          <h2>{{row.value.title}}</h2>
          <div class="flex info" style="justify-content: space-between;">
            <p><a v-if="row.value.keyword" href="javascript:;">{{row.value.keyword}}</a></p>
            <p><template v-if="row.value.create_time">{{row.value.create_time}}</template></p>
          </div>
        </div>
      </template>
      <template #file_imgs="row">
        <van-swipe v-if="row.value" indicator-color="white">
          <van-swipe-item v-for="v in row.value.split(',')">
            <template v-if="v"><img-referrer class="img" style="width: 100%;" :src="_href(v)"/></template>
          </van-swipe-item>
        </van-swipe>
      </template>
      <template #file_img="row">
        <img-referrer class="img" style="width: 100%;" :src="_href(row.value)"/>
      </template>
      <template #editor="row">
        <div class="editor" v-html="row.value"></div>
      </template>
    </form_param>
  </div>
</template>

<script>
import form_param from "@/components/form_param.vue";
import {ajax} from "@/js/api_tool.js";
import {_href} from "@/js/s94_tool.js";
import {_get, href_handle} from "@/vue_plugin/router_auto.js";
import ImgReferrer from "@/components/widget/ImgReferrer.vue";
import HeaderSlot from "@/components/slot/HeaderSlot.vue";
export default {
  components: {HeaderSlot, ImgReferrer, form_param},
  props: {
    model: Object,
    this_action: Object,
  },
  data(){
    return {
      id: _get("id",0),
      form_config: [],
      info: {},
    }
  },
  methods:{
    href_handle,
    _href,
    is_component(type){
      return !!~Object.keys(this.$options.components).indexOf(type);
    },
  },
  mounted(){
    let group_config = [
      {type:"_info_", value: {}, include_name:["title","keyword","create_time"]},
    ];
    let url = `/home/${this.model.name}/${this.this_action.action}?id=${this.id}&_is_init_=1`;
    ajax(url, (res)=>{
      let extend_config = {};
      if (this.this_action.type === 'info') extend_config.is_info = true;
      this.form_config = [];
      Object.values(res.data).forEach((row)=>{
        this.info[row.name] = row.value;
        Object.assign(row, extend_config);
        let in_group = group_config.some((gc_row)=>{
          if (~gc_row.include_name.indexOf(row.name)){
            gc_row.value[row.name] = row.value;
            if (Object.keys(gc_row.value).length<=1) { //第一次遇到属于gc_row的参数时，把gc_row加入到form_config
              this.form_config.push(gc_row);
            }
            return true;
          }
        })
        if (!in_group) this.form_config.push(row);
      });
    })
  }
}
</script>